<template>
  <div class="applyDeviceList pd-20">
    <el-input v-model="param.consignee"
              placeholder="请输入收货人"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-input v-model="param.phone"
              placeholder="请输入电话"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-select v-model="param.applyStatus"
               filterable
               clearable
               class="w-200"
               placeholder="请选择状态"
               @clear="handleQuery"
               @change="handleQuery">
      <el-option v-for="item in statusList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"></el-option>
    </el-select>
    <el-date-picker type="date"
                    v-model="param.startTime"
                    placeholder="请选择起始日期"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    clearable
                    @change="handleQuery"
                    @clear="handleQuery"></el-date-picker>
    <el-date-picker type="date"
                    v-model="param.endTime"
                    placeholder="请选择截止日期"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    clearable
                    @change="handleQuery"
                    @clear="handleQuery"></el-date-picker>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <element-table class="mt-20"
                   v-loading="loading"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-button type="primary"
                   v-if="row.applyStatus === 0"
                   @click="handleRow(row, 'pass')">通 过</el-button>
        <el-button type="danger"
                   v-if="row.applyStatus === 0"
                   @click="handleRow(row, 'dismissed')">驳 回</el-button>
        <el-button type="warning"
                   v-if="row.applyStatus === 1"
                   @click="handleRow(row, 'delivery')">发 货</el-button>
        <span v-if="row.applyStatus === 2">已驳回</span>
        <span v-if="row.status === 3">已完成</span>
      </template>
    </element-table>
  </div>
</template>

<script>
  import elementTable from '@/base/ElementTable'
  export default {
    name: "applyDeviceList",
    data () {
      return {
        columns: [
          {
            label: '申请人信息',
            prop: 'applyName',
            width: 200,
            align: 'center',
            showToolTip: true,
            formatter: (row, cellValue) => {
              return row.user != null ? row.user.nickName : row.doctor.nickName;
            },
          },
          {
            label: '操作员',
            prop: 'adminName',
            align: 'center',
            width: 100,
            formatter: (row, cellValue) => {
              return row.admin ? row.admin.userName : '';
            }
          },
          {
            label: '设备名称',
            prop: 'deviceName',
            align: 'center'
          },
          {
            label: '用途',
            prop: 'deviceUse',
            align: 'center'
          },
          {
            label: '收货人',
            prop: 'consignee',
            align: 'center'
          },
          {
            label: '电话',
            prop: 'phone',
            align: 'center'
          },
          {
            label: '地区',
            prop: 'area',
            align: 'center'
          },
          {
            label: '详细地址',
            prop: 'address',
            align: 'center'
          },
          {
            label: '创建时间',
            prop: 'createTime',
            align: 'center',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss');
            }
          },
          {
            label: '状态',
            prop: 'applyStatus',
            formatter: (row, cellValue) => {
              if (row.applyStatus === 1) return '未通过'
              if (row.applyStatus === 2) return '已通过'
              if (row.applyStatus === 3) return '已驳回'
              if (row.applyStatus === 4) return '已完成'
            },
            align: 'center'
          },
          {
            label: '驳回原因',
            prop: 'reason',
            align: 'center',
            width: 100,
          },

          {
            label: '操作',
            prop: 'option',
            align: 'center',
            width: 200,
            isSlot: true
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        pageIndex: 1,
        pageSize: 20,
        loading: false,
        param: {
          id: null,
          isComplete: '',
          phone: '',
          consignee: '',
          applyStatus: '',
          startTime: '',
          endTime: ''
        },
        statusList: [
          { value: 1, label: '未通过' },
          { value: 2, label: '已通过' },
          { value: 3, label: '已驳回' },
          { value: 4, label: '已发货' }
        ]
      }
    },
    created () {
      this._getList();
    },
    methods: {
      handleQuery () {
        this.pageIndex=1
        this._getList();
      },
      _getList () {
        this.loading = true;
        this.post(this.api.applyDeviceList.url, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          ...this.param
        }).then(res => {
          if (res.data.code === '200') {
            this.loading = false;
            let resData = res.data.object;
            this.tableData = resData.content;
            this.pageTotal = resData.totalSize;
          }
        })
      },
      handleRow (row, option) {
        switch (option) {
          case 'delivery':
            this.$confirm('确认发货？')
              .then(_ => {
                this.handleOption('delivery', row, 3);
              })
              .catch(_ => { });
            break;
          case 'pass':
            this.$confirm('确认通过？')
              .then(_ => {
                this.handleOption('pass', row, 1);
              })
              .catch(_ => { });
            break;
          case 'dismissed':
            this.$confirm('确认驳回？')
              .then(_ => {
                this.handleOption('dismissed', row, 2);
              })
              .catch(_ => { });
            break;
        }
      },
      handleOption (option, row, applyStatus) {
        this.post(this.api.applyDeviceEdit.url, {
          "applyStatus": applyStatus,
          "id": row.id,
        }).then(res => {
          if (res.data.code === '200') {
            if (option === 'pass') {
              this.$message.success('通过成功!');
              this._getList();
            }
            if (option === 'dismissed') {
              this.$message.success('驳回成功!');
              this._getList();
            }
            if (option === 'delivery') {
              this.$message.success('发货成功!');
              this._getList();
            }
          }
        })

      },
      handleChangePage (val) {
        this.pageIndex = val;
        this._getList();
      },

    },
    components: {
      'element-table': elementTable
    },
  }
</script>
<style>
</style>
